<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
  content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>寻健康达人，为山东鼓劲</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="css/swiper.min.css" />
<link rel="stylesheet" type="text/css" href="css/weui.min.css" />
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript"
  src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>  <script src="js/constants.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  mui.init({
    gestureConfig : {
      hold : true,
      release : true
    }
  });
  mui.ready(function() {
    mui(".mui-scroll-wrapper").scroll();
    mui(".mui-scroll-wrapper")[0].addEventListener('hold', function() {
      swiper.noSwiping = true;
    });
    mui(".mui-scroll-wrapper")[0].addEventListener('release', function() {
      swiper.noSwiping = false;
    });
    mui(".mui-scroll-wrapper").scroll();     /*添加文章点击监听*/     mui("#cities-wrapper").on('tap', 'a' ,function(event){     		var name = this.innerText;     		console.log("name = "+name);     		showFoodOrderWrapper(name);     });
  });
  // key of lastCode that stored in cookie
  var COOCKIE_KEY_LAST_CODE = 'lastCode';
  // the object to store userInfo
  var userInfoObj = null;
  var candidate = null;
  var candidateObj = null;
  var canVote = true;

  var redirectToOauth = function() {
    location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8be05afa2161d315&redirect_uri='

        + location.href

        + '&response_type=code&scope=snsapi_userinfo&state=success#wechat_redirect';
  };

  var redirectToIndex = function() {
    location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8be05afa2161d315&redirect_uri=http://www.imdcfz.com&response_type=code&scope=snsapi_userinfo&state=success#wechat_redirect';
  };

  (function() {
    // check if url contain code
    var search = location.search;
    search && search.length && (search = search.substring(1));
    var code = null;
    candidate = null;
    var params = search.split('&');
    params.forEach(function(param) {
      var keyVal = param.split('=');
      if (!keyVal || !keyVal.length)
        return;
      if (keyVal[0].toLowerCase() == 'code') {
        code = keyVal.length == 1 ? '' : keyVal[1];
      } else if (keyVal[0].toLowerCase() == 'candidate') {
        candidate = keyVal.length == 1 ? '' : keyVal[1];
      }
    });

    if (!candidate) {
      // no candidate found, redirect to index page
      redirectToIndex();
    }

    if (!!code) {
      // found code
      // if the code has used before, redirect
      var codeCookies = utils.getCookies(COOCKIE_KEY_LAST_CODE);
      if (codeCookies && codeCookies.length) {
        if (code == codeCookies[0]) {
          // has used before
          redirectToOauth();
          return;
        } else {
          // update the lastCode
          utils.deleteCookie(COOCKIE_KEY_LAST_CODE);
          utils.setCookie(COOCKIE_KEY_LAST_CODE, code, 30);
        }
      } else {
        // no history code found, update the lastCode
        utils.deleteCookie(COOCKIE_KEY_LAST_CODE);
        utils.setCookie(COOCKIE_KEY_LAST_CODE, code, 30);
      }
      // else, is a new code, try to get userinfo
      $
          .ajax({
            method : 'get',
            url : 'userinfo',
            data : {
              code : code
            },
            success : function(data) {
              try {
                var dataObj = JSON.parse(data);
                if (dataObj.code == 0) {
                  // success get user info
                  var bodyObj = dataObj.body;
                  userInfoObj = {};
                  Object.keys(bodyObj).forEach(function(key) {
                    userInfoObj[key] = bodyObj[key];
                  });
                  getCandidateInfo();
                } else {
                  if (dataObj.body && dataObj.body.errcode
                      && dataObj.body.errcode == 40029) {
                    // if invalid code, redirect
                    redirectToOauth();
                  } else {
                    errToast($('#err-toast'), $('#err-toast-content'),
                        dataObj.msg);
                  }
                }
              } catch (e) {
                errToast($('#err-toast'), $('#err-toast-content'), JSON
                    .stringify(e));
              }
            },
            error : function(data, textStatus) {
              errToast($('#err-toast'), $('#err-toast-content'), textStatus
                  || data.statusText);
            }
          });
      // get config for wechat js api
      $.ajax({
        type : 'get',
        url : 'config',
        data : {
          url : location.href ? location.href.split('#')[0] : ''
        },
        success : function(data) {
          try {
            var dataObj = JSON.parse(data);
            if (dataObj.code == 0 && dataObj.body) {
              var dataBody = dataObj.body;
              wx.config({
                debug : false,
                appId : dataBody.appId,
                timestamp : dataBody.timestamp,
                nonceStr : dataBody.nonceStr,
                signature : dataBody.signature,
                jsApiList : [ 'onMenuShareTimeline', 'onMenuShareAppMessage' ]
              });
              $('#info-share-button')
                  && $('#info-share-button').click(function() {
                    showShareWrapper();
                  });
            } else {
              errToast($('#err-toast'), $('#err-toast-content'), dataObj.msg);
            }
          } catch (e) {
            errToast($('#err-toast'), $('#err-toast-content'), JSON
                .stringify(e));
          }
        },
        error : function(data, textStatus) {
          errToast($('#err-toast'), $('#err-toast-content'), textStatus
              || data.statusText);
        }
      });
    } else {
      // no code found, redirect to authorize page
      redirectToOauth();
    }
  })();

  wx.ready(function() {
    wx.onMenuShareTimeline({
      title : '寻健康达人 为山东鼓劲',
      desc : '寻健康达人，为山东鼓劲',
      link : 'http://www.imdcfz.com',
      imgUrl : 'http://www.imdcfz.com/img/lucky-share-default.png',
      cancel : function() {
        errToast($('#err-toast'), $('#err-toast-content'), '取消分享');
      },
      fail : function() {
        errToast($('#err-toast'), $('#err-toast-content'), '分享失败');
      },
      trigger : function() {
        //$('#share-wrapper').hide();
      }
    });

    wx.onMenuShareAppMessage({
      title : '寻健康达人 为山东鼓劲',
      desc : '寻健康达人，为山东鼓劲',
      link : 'http://www.imdcfz.com',
      imgUrl : 'http://www.imdcfz.com/img/lucky-share-default.png',
      cancel : function() {
        errToast($('#err-toast'), $('#err-toast-content'), '取消分享');
      },
      fail : function() {
        errToast($('#err-toast'), $('#err-toast-content'), '分享失败');
      },
      trigger : function() {
        //$('#share-wrapper').hide();
      }
    });
  });

  var getCandidateInfo = function() {
    if (!candidate)
      return;
    $
        .ajax({
          type : 'get',
          url : 'candidate',
          data : {
            candidate : candidate
          },
          success : function(data) {
            try {
              var dataObj = JSON.parse(data);
              if (dataObj.code == 0) {
                // success get candidate info
                var bodyObj = dataObj.body;
                candidateObj = {};
                Object.keys(bodyObj).forEach(function(key) {
                  candidateObj[key] = bodyObj[key];
                });
                // update userInfo
                updateCandidateInfo();
              } else {
                errToast($('#err-toast'), $('#err-toast-content'), dataObj.msg);
                if (dataObj.body) {
                  if (dataObj.body.noCandidate) {
                    // no openid found, or not registered
                    // redirect to oauth page and then redirect to index page
                    setTimeout(redirectToIndex, 2000);
                  }
                }
              }
            } catch (e) {
              errToast($('#err-toast'), $('#err-toast-content'), JSON
                  .stringify(e));
            }
          },
          error : function(data, textStatus) {
            errToast($('#err-toast'), $('#err-toast-content'), textStatus
                || data.statusText);
          }
        });
  };

  var updateCandidateInfo = function() {
    if (!candidateObj)
      return;
    candidateObj.avatar && $('#lucky-info-avatar')
        && $('#lucky-info-avatar').attr('src', candidateObj.avatar);
    candidateObj.tag && $('#user-tag')
        && $('#user-tag').html(TAGS[candidateObj.tag]);
    //console.log("tag = "+candidateObj.tag);
    candidateObj.userName && $('#candidate-name')
        && $('#candidate-name').html(candidateObj.userName);
    $('#candidate-total')
        && $('#candidate-total').html(candidateObj.support + '票');
    $('#candidate-rank')
        && $('#candidate-rank').html('第' + (candidateObj.rank + 1) + '名');
    //console.log("tag desc = "+TAGS_PLUS_COMMENTS[candidateObj.tag]);
    $('#tag-desc') && $('#tag-desc').html(TAG_COMMENTS[candidateObj.tag]);
  };

  $(function() {
    $('#support-button')
        && $('#support-button').click(
            function(event) {
              if (!canVote) {
                errToast($('#err-toast'), $('#err-toast-content'),
                    '每天只能鼓三次劲哦~ 欢迎明天再来~');
                return;
              }
              if (!candidate || !userInfoObj) {
                errToast($('#err-toast'), $('#err-toast-content'),
                    '缺少被支持者信息或支持者信息');
                // return;
              }
              $.ajax({
                type : 'get',
                url : 'support',
                data : {
                  candidate : candidate,
                  supporter : userInfoObj.openid
                },
                success : function(data) {
                  try {
                    var dataObj = JSON.parse(data);
                    if (dataObj.code == 0) {
                      // success to vote
                      // update data and content, show an animation
                      $('#support-hand').addClass('active');
                      candidateObj.support += 1;
                      $('#candidate-total')
                          && $('#candidate-total').html(
                              candidateObj.support + '票');
                      setTimeout(function() {
                        $('#support-hand').removeClass('active');
                      }, 500);
                    } else {
                      errToast($('#err-toast'), $('#err-toast-content'),
                          dataObj.msg);
                      if (dataObj.body && dataObj.body.exceed) {
                        // cannot vote any more (today)
                        canVote = false;
                      }
                    }
                  } catch (e) {
                    errToast($('#err-toast'), $('#err-toast-content'), JSON
                        .stringify(e));
                  }
                },
                error : function(data, textStatus) {
                  errToast($('#err-toast'), $('#err-toast-content'), textStatus
                      || data.statusText);
                }
              });
            });
  });

  var initSupportPage = function() {
    initCitiesScroll();
    ajaxGet(1);
  };
</script>
</head>

<body onload="initSupportPage()">
  <!-- 音乐播放按钮 -->
  <div class='off rotate' id='audio_btn' style='display:block;'
    onclick="playorPause()">
    <audio id='media' src="http://www.imdcfz.com/sound/bgsound.mp3"
      preload="" autoplay="" loop=""></audio>
  </div>
  <!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide result" id="result-7">
        <div id="lucky-info-wrapper">
          <img src="img/support-title.png" id="lucky-info-title" />
          <div class="user-info-avatar-wrapper">
            <div class="user-info-avatar-inline-wrapper">
              <img src="img/lucky-info-default-avatar.png"
                id="lucky-info-avatar" /> <img
                src="img/lucky-info-avatar-icon.png"
                id="lucky-info-avatar-icon" /> <label id="user-tag"
                class='user-tag-label'
                style="float:right; margin-left:70px;"></label>
            </div>
          </div>
        </div>
        <div id="register-wrapper">
          <div class="support-wrapper">
            <div class="candidate-basic-info-wrapper">
              <div class="candidate-name-wrapper">
                姓名：<span id="candidate-name"></span>
              </div>
              <div>
                累计票数：<span id="candidate-total"></span>
              </div>
              <div>
                投票排名：<span id="candidate-rank"></span>
              </div>
            </div>
            <div class="support-slogan-wrapper ">
              <img src="img/support-slogan-blank.png"
                class="support-slogan" /> <label id='tag-desc'
                class='user-tag-desc'></label>
            </div>
            <img src="img/support-hand.png" class="support-hand"
              id="support-hand" />
            <div class="support-buttons-wrapper">
              <a class="btn" id="support-button">投票鼓劲</a> <a class="btn"
                id="sign-up-button"
                href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx8be05afa2161d315&redirect_uri=http://www.imdcfz.com&response_type=code&scope=snsapi_userinfo&state=success#wechat_redirect">参与报名</a>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-slide result" id="result-8">
        <div id="rank-top-wrapper">
          <div id="rank-title-wrapper">
            <div class="rank-btns-wrapper">
              <a class="btn active">健康达人</a> <a class="btn"
                onclick="jumpToSwipe(2)">齐鲁美食</a> <a class="btn"
                onclick="jumpToSwipe(3)">活动说明</a>
            </div>
            <img src="img/rank-title.png" />
          </div>
          <!-- 可滚动区域 -->
          <div id="rank-wrapper"
            class='mui-scroll-wrapper swiper-no-swiping'>
            <div class='mui-scroll'>
              <div class="query-rank-wrapper">
                <input id="query-rank-input" /><a class="btn"
                  id="query-rank-btn" onclick="ajaxGet(1)"></a>
              </div>
              <div id="rank-result-wrapper"></div>
              <div id="rank-result-pagination"></div>
            </div>
          </div>
          <div id="load-rank-wrapper">
            <div class="load-rank-inner">
              <img src="img/loading.png" class="load-rank-icon" />
              <p>加载中...</p>
            </div>
          </div>
        </div>
        <div id="rank-foot-wrapper">
          <img src="img/food-foot.png" />
        </div>
      </div>
      <div class="swiper-slide result" id="result-9">
        <div id="food-title-wrapper">
          <div class="rank-btns-wrapper">
            <a class="btn" onclick="jumpToSwipe(1)">健康达人</a> <a
              class="btn active">齐鲁美食</a> <a class="btn"
              onclick="jumpToSwipe(3)">活动说明</a>
          </div>
          <img src="img/rank-title.png" />
        </div>
        <div id="cities-wrapper">
          <div id="cities-inner">
            <div class="prompt-area">
              <span>点击下方城市名称，寻找齐鲁美食</span>
            </div>
            <a class="btn">济南</a> <a
              class="btn">青岛</a> <a class="btn">菏泽</a> <a class="btn">临沂</a>
            <a class="btn">济宁</a> <a class="btn">烟台</a> <a class="btn">潍坊</a>
            <a class="btn">滨州</a> <a class="btn">淄博</a> <a class="btn">德州</a>
            <a class="btn">聊城</a> <a class="btn">东营</a> <a class="btn">泰安</a>
            <a class="btn">威海</a> <a class="btn">日照</a> <a class="btn">枣庄</a>
            <a class="btn">新泰</a> <a class="btn">莱芜</a> <a class="btn">海阳</a>
            <a class="btn">荣成</a> <a class="btn">博兴</a> <a class="btn">鱼台</a>
            <a class="btn">城阳</a> <a class="btn">济阳</a> <a class="btn">淄川</a>
            <a class="btn">滕州</a> <a class="btn">巨野</a> <a class="btn">单县</a>
            <a class="btn">郯城</a> <a class="btn">嘉祥</a> <a class="btn">兰陵</a>
            <a class="btn">寿光</a> <a class="btn">青州</a> <a class="btn">胶州</a>
            <a class="btn">黄岛</a> <a class="btn">岚山</a>
          </div>
        </div>
        <div id="food-order-wrapper" class='mui-scroll-wrapper swiper-no-swiping'>
          <div class='mui-scroll'>           
            <div class="food-line">              <a id="0" class="btn">烧烤第一期</a>              <a id="1" class="btn">烧烤第二期</a>            </div>            <div class="food-line">              <a id="2" class="btn">龙虾第一期</a>              <a id="3" class="btn">龙虾第二期</a>            </div>            <div class="food-line">              <a id="4" class="btn">海鲜第一期</a>              <a id="5" class="btn">海鲜第二期</a>            </div>                          <div class="food-line">            	<button class="btn" onclick="closeFoodOrderWrapper()">返回</button>            </div>
          </div>
        </div>
        <div id="food-foot-wrapper" onclick="linkTo(100)">
          <img src="img/food-root.png" />
        </div>
      </div>
      <!-- 活动说明 -->
      <div class="swiper-slide result" id="result-10">
        <div id="rule-title-wrapper">
          <div class="rank-btns-wrapper">
            <a class="btn" onclick="jumpToSwipe(1)">健康达人</a> <a
              class="btn" onclick="jumpToSwipe(2)">齐鲁美食</a> <a
              class="btn active">活动说明</a>
          </div>
          <img src="img/rank-title.png" />
        </div>
        <!-- 可滚动区域 -->
        <div id="rules-wrapper"
          class='mui-scroll-wrapper swiper-no-swiping'>
          <div class='mui-scroll'>
            <div id="rule-1-wrapper">
              <img src="img/rule-1.png" />
            </div>
            <div id="rule-2-wrapper">
              <img src="img/rule-2.png" />
            </div>
            <div id="rule-3-wrapper">
              <img src="img/rule-3.png" />
            </div>
            <div id="rule-4-wrapper">
              <img src="img/rule-4.png" />
            </div>
          </div>
        </div>
        <div id="rule-foot-wrapper">
          <img src="img/food-root.png" />
        </div>
      </div>
    </div>
  </div>
  <!-- Error Toast -->
  <div id="err-toast" style="display:none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
      <i class="weui_icon_warn"></i>
      <p class="weui_toast_content" id="err-toast-content">错误</p>
    </div>
  </div>
  <!-- Success Toast -->
  <div id="success-toast" style="display:none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
      <i class="weui_icon_toast"></i>
      <p class="weui_toast_content" id="success-toast-content">成功</p>
    </div>
  </div>
  <script type="text/javascript">
      var swiper = new Swiper('.swiper-container', {
        direction : 'vertical',
        mousewheelControl : true,
        watchSlidesProgress : true,
      });
    </script>
</body>
</html>